<template>
    <div class="newPrimaryClass">
        <div class="newPrimaryClass_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">{{text}}<i class="el-icon-close"></i></div>
		</div>
        <!-- 商家类型与返回 -->
        <div class="newPrimaryClass_type">
            <div>楼盘列表/<span class="text">{{text}}</span></div>
            <el-button @click="toBack" type="success">返回</el-button>
        </div>

        <!-- 基础信息 -->
        <div class="contentBox">
            <h3>基础信息</h3>
            <div class="boxBig">
                <div class="item">
                    <div class="tit">楼盘名称</div>
                    <el-input style="width:40%;" placeholder="请输入楼盘名称" class="input" type="text" v-model="name"></el-input>
                </div>
                <div class="item">
                    <span class="tit">楼盘均价</span>
                    <el-input style="width:40%;" placeholder="请输入楼盘均价" class="input" type="number" v-model="area_price"></el-input>元/m²
                </div>
            </div>
            <div class="boxBig">
                <div class="item">
                    <span class="tit">楼盘房龄</span>
                    <el-input style="width:40%;" placeholder="请输入楼盘房龄" class="input" type="number" v-model="age"></el-input>年
                </div>
                <div class="item">
                    <span class="tit">开盘时间</span>
                    <el-date-picker
                    v-model="sale_time"
                    type="date"
                    placeholder="选择日期">
                    </el-date-picker>
                    
                </div>
            </div>
            <div class="boxBig">
                <div class="item">
                    <span class="tit">楼盘经度</span>
                    <el-input style="width:40%;" placeholder="请输入楼盘地理经度" class="input" type="number" v-model="lng"></el-input>
                </div>
                <div class="item">
                    <span class="tit">楼盘纬度</span>
                    <el-input style="width:40%;" placeholder="请输入楼盘地理纬度" class="input" type="number" v-model="lat"></el-input>
                </div>
            </div>
            <div class="boxBig">
                <div class="item">
                    <span class="tit">建成时间</span>
                    <el-date-picker
                        v-model="build_time"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </div>
                <div class="item">
                    <span class="tit">起始面积</span>
                    <el-input style="width:15%;" placeholder="请输入开始面积" class="input" type="number" v-model="start_area"></el-input>▬
                    <el-input style="width:15%;" placeholder="请输入结束面积" class="input" type="number" v-model="end_area"></el-input>m²
                </div>
            </div>
            <div class="boxBig">
                <div class="item">
                    <span class="tit">联系电话</span>
                    <el-input style="width:40%;" placeholder="请输入联系电话" class="input" type="number" v-model="phone"></el-input>
                </div>
                <div class="item">
                    <span class="tit">楼盘标签</span>
                    <el-select
                        v-model="valueTag"
                        multiple
                        filterable
                        allow-create
                        @change="selectTag"
                        default-first-option
                        placeholder="请选择楼盘标签">
                        <el-option
                        v-for="item in tagList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="item">
              <div class="tit">区域</div>
              <el-select v-model="provinceObj" @change="select1" value-key="cityid" placeholder="请选择省份">
                <el-option
                v-for="item in province"
                :key="item.cityid"
                :label="item.city_name"
                :value="{cityid:item.cityid,city_name:item.city_name}">
                </el-option>
              </el-select>
              <el-select v-model="cityObj" @change="select2" value-key="cityid" placeholder="请选择城市">
                <el-option
                v-for="item in city"
                :key="item.cityid"
                :label="item.city_name"
                :value="{cityid:item.cityid,city_name:item.city_name}">
                </el-option>
              </el-select>
              <el-select v-model="districtObj" @change="select3" value-key="cityid" placeholder="请选择县区">
                <el-option
                v-for="item in district"
                :key="item.cityid"
                :label="item.city_name"
                :value="{cityid:item.cityid,city_name:item.city_name}">
                </el-option>
              </el-select>
              <el-input style="width:30%;" v-model="address" placeholder="请输入楼盘详细地址"></el-input>
            </div>
            <div class="item">
              <div class="tit">卖场</div>
              <el-select
                v-model="marketId"
                clearable
                @change="selectMarket"
                filterable
                placeholder="请选择卖场"
              >
                <el-option
                  v-for="item in marketList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div>
                <div class="item">
                    <div class="tit">楼盘图片</div>
                    <el-upload
                        action="/api/client/base/uploadfile"
                        list-type="picture-card"
                        :on-success="handleEstateSuccess"
                        :on-preview="handlePictureCardPreview"
                        :headers="myHeaders"
                        :file-list="fileList"     
                        :before-upload="beforeAvatarUpload"         
                        :limit="15" 
                        :auto-upload="true"    
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>
                <p style="color:#a0a0a0;padding:0px 0 0 100px;"><span style="color:#409eff;">图片将展示在楼盘列表</span>（每张图片大小不超过2M，尺寸建议宽度为640，并保持图片大小一致）</p>	
            </div>
            <div>
                <div class="item">
                    <div class="tit">楼盘视频</div>
                    <el-upload
                        class="avatar-uploader el-upload--text"
                        action="/api/client/base/uploadfile"
                        :show-file-list="false"
                        :on-success="handleVideoSuccess"
                        :before-upload="beforeUploadVideo"
                        :on-progress="uploadVideoProcess">
                        <video
                        v-if="videoUrl != '' && videoFlag == false"
                        :src="videoUrl"
                        class="avatar"
                        controls="controls"
                        >
                        您的浏览器不支持视频播放
                        </video>
                        <i v-if="videoUrl == '' && videoFlag == false"
                        class="el-icon-plus avatar-uploader-icon"
                        ></i>
                        <el-progress
                        v-if="videoFlag == true"
                        type="circle"
                        :percentage="videoUploadPercent"
                        style="margin-top:30px;"
                        ></el-progress>
                        <div class="uploadLabel" v-if="videoUrl!==''" @click.stop="closeVideo">
                            <i class="el-icon-close"></i>
                        </div>
                    </el-upload>
                </div>
                <p style="color:#a0a0a0;padding:0px 0 0 100px;">视频发布建议在1.5分钟以内，大小不超过30M</p>	
            </div>
            <div class="btn">
                <el-button type="primary" @click="toSubmit">提交</el-button>
            </div>
        </div>
        <!-- 其他 -->
        <div class="otherBox" v-if="id">
            <el-tabs v-model="activeName" stretch @tab-click="handleClick">
                <!-- 楼盘图片视频 -->
                <!-- <el-tab-pane label="楼盘图片/视频" name="1"></el-tab-pane> -->

                <!-- 楼盘户型 -->
                <el-tab-pane label="楼盘户型" name="2">
                    <div class="addBtn"><el-button @click="toEstateHouseAdd" type="success">新增户型</el-button></div>
                    <table-public ref="Fn2" :thItem="thItem" :tabsNum="activeName" :estateId="id"></table-public>
                </el-tab-pane>

                <!-- 可售房源 -->
                <el-tab-pane label="可售房源" name="3">
                    <div class="addBtn"><el-button @click="toHouseSource" type="success">新增房源</el-button></div>
                    <table-public ref="Fn3" :thItem="thItem" :tabsNum="activeName" :estateId="id"></table-public>
                </el-tab-pane>

                <!-- 案例推荐 -->
                <el-tab-pane label="推荐设计师" name="4">
                    <div class="addBtn"><el-button @click="toAddDesign" type="success">新增推荐设计师</el-button></div>
                    <table-public ref="Fn4" :thItem="thItem" :tabsNum="activeName" :estateId="id"></table-public>
                </el-tab-pane>
                
                <!-- 推荐家居 -->
                <el-tab-pane label="推荐家居" name="5">
                     <div class="addBtn"><el-button type="success" @click="toAddHousehold">新增家居商品</el-button></div>
                    <table-public ref="Fn5" :thItem="thItem" :tabsNum="activeName" :estateId="id"></table-public>
                </el-tab-pane>

                <!-- 直播 -->
                <!-- <el-tab-pane label="直播" name="6">
                    <div class="addBtn"><el-button type="success">新增直播</el-button></div>
                    <table-public ref="Fn6" :thItem="thItem" :tabsNum="activeName" :estateId="id"></table-public>
                </el-tab-pane> -->

                <!-- 小区绿化 -->
                <el-tab-pane label="小区绿化" name="7">
                    <div class="addBtn"><el-button type="success" @click="addGreen">新增绿化</el-button></div>
                    <div class="imgBox">
                        <div class="imgItem" v-for="(item,index) in greenList" :key="index">
                            <el-image 
                                :src="item.image_id.path" 
                                :preview-src-list="greenImgList">
                            </el-image>
                            <div class="uploadLabel" @click.stop="closeGreenImg(item.id)">
                                <i class="el-icon-close"></i>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 新增设计师对话框 -->
        <el-dialog
            title="添加推荐设计师"
            :visible.sync="dialogVisible_desgin"
            @closed="closedFn_desgin"
            width="50%">
            <div class="houseHoldBox">
                <div class="inputBox">
                    <el-input type="text" v-model="desginInput" @blur="changeInput_desgin" placeholder="请输入设计师名"></el-input>
                    <el-button type="primary" @click="searchDesgin">搜索</el-button>
                </div>
                <div class="shopBox">
                    <div class="item" v-for="(item,index) in desginList" :key="index">
                        <el-radio v-model="desginRadio" :label="item.id" >
                            <div class="radioBox">
                                <img :src="item.avatar.path" mode="" />
                                <div class="title">{{item.name}}</div>
                            </div>
                        </el-radio>
                    </div>
                    <div class="openMore" v-if="desginList.length" @click="moreBtnDes">{{moreText}}</div>
                </div>
                <div class="notList" v-if="searchShopList">暂无数据~</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_desgin = false">取 消</el-button>
                <el-button type="primary" @click="desginConfirm">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 家居商品选择对话框 -->
        <el-dialog
            title="家居商品"
            :visible.sync="dialogVisible_houseHold"
            @closed="closedFn_house"
            width="50%">
            <div class="houseHoldBox">
                <div class="inputBox">
                    <el-input type="text" v-model="houseHoldInput" @blur="changeInput" placeholder="请输入商品名"></el-input>
                    <el-button type="primary" @click="searchHouseHold">搜索</el-button>
                </div>
                <div class="shopBox">
                    <div class="item" v-for="(item,index) in houseHoldList" :key="index">
                        <el-radio v-model="houseRadio" :label="item.id" >
                            <div class="radioBox">
                                <img :src="item.main_imgurl.path" mode="" />
                                <div class="title">{{item.product_title}}</div>
                            </div>
                        </el-radio>
                    </div>
                    <div class="openMore" v-if="houseHoldList.length" @click="moreBtnHold">{{moreText}}</div>
                </div>
                <div class="notList" v-if="searchShopList">暂无数据~</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_houseHold = false">取 消</el-button>
                <el-button type="primary" @click="houseHoldConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="小区绿化"
            :visible.sync="dialogVisibleGreen"
            @closed="closedFn_green"
            width="35%">
            <div class="item">
                <el-upload
                    action="/api/client/base/uploadfile"
                    list-type="picture-card"
                    :on-success="handleEstateSuccess_green"
                    :on-preview="handlePictureCardPreview_green"
                    :headers="myHeaders"
                    :file-list="fileList_green"     
                    :before-upload="beforeAvatarUpload_green"         
                    :limit="10" 
                    :auto-upload="true"   
                    multiple 
                    :on-remove="handleRemove_green">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible_green">
                    <img width="100%" :src="dialogImageUrl_green" alt="">
                </el-dialog>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleGreen = false">取 消</el-button>
                <el-button type="primary" @click="green_Confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import tablePublic from '@/components/estateManage/tablePublic/tablePublic.vue'
export default {
    components:{
        tablePublic
    },
    data(){
        return{
            page:1,
            pagesize:10,
            name:'',
            area_price:'',//均价
            age:'',//房龄
            sale_time:'',//开盘时间
            phone:'',//楼盘电话
            text:'新增楼盘',
            lng:'',//经度
            lat:'',//纬度
            build_time:'',//建成时间
            start_area:'',//建成面积（起）
            end_area:'',//建成面积（始）
            province:[],
			city:[],
			district:[],
			provinceObj:{},
			cityObj:{},
			districtObj:{},
            address:'',
            id:null, //小区id
            myHeaders: {
              'access-token': this.$store.state.token  , //这里重新定义了请求头
              'Authorization': this.$store.state.token ,
              'user-id':this.$store.state.user_id
            },
            fileList:[],
            dialogImageUrl:'',
            dialogVisible:false,

            videoUrl:'',//视频连接
            videoId:'',//视频id
            videoFlag:false,
            videoUploadPercent:0,

            activeName:'2',
            thItem:['户型名称','类型','户型','面积','价格'],

            dialogVisible_desgin:false,//新增设计师推荐对话框
            desginList:[], //设计师推荐的列表
            desginInput:'',//
            desginRadio:'',//选中设计师
            pageDes:1,
            pagesizeDes:10,

            dialogVisible_houseHold:false,//新增家居对话框
            houseHoldList:[],//家居商品搜索的列表
            houseHoldInput:'',
            houseRadio:'',
            pageHold:1,
            pagesizeHold:10,

            searchShopList:false,//
            moreText:'点击加载更多~',


            
            fileList_green:[],
            dialogImageUrl_green:'',
            dialogVisible_green:false,
            dialogVisibleGreen:false,
            greenList:[],
            greenImgList:[],

            tagList:[], //楼盘标签
            valueTag:[],
            
            marketId: "", //卖场id
            marketList: [],
        }
    },
    created() {
        this.id = this.$route.query.id;
    },
    mounted(){
        this.id = this.$route.query.id;
        this.remoteMethod();
		    this.getProvince()
        this.getEstateTag()
        if(this.id){
            this.text = '楼盘详情'
            this.getEstateInfo()
            this.$refs.Fn2.getEstateHouseList()
        }
        
        
    },
    methods:{
        // 获取卖场列表
        remoteMethod() {
          this.$http.post("/api/root/Market/marketList").then((res) => {
            console.log(res, "卖场列表");
            if (res.code == 1) {
              this.marketList = res.data ? res.data : [];
            }
          });
        },
        // 选择卖场
        selectMarket() {

        },
        // 获取楼盘详情
        getEstateInfo(){
            this.valueTag = []
            this.$http.post('/api/root/Estate/view',{id:this.id}).then(res=>{
                console.log(res,'楼盘详情');
                if(res.code==1){
                    this.name = res.data.name;
                    this.area_price = res.data.area_price;
                    this.age = res.data.age;
                    this.lng = res.data.lng;
                    this.lat = res.data.lat;
                    this.start_area = res.data.start_area;
                    this.end_area = res.data.end_area;
                    this.phone = res.data.phone;
                    this.marketId = res.data.market_id;
                    this.videoId = res.data.video.length?res.data.video[0].id:''
                    this.videoUrl = res.data.video.length?res.data.video[0].path:''
                    let tagArr = res.data.house_tag.split(',')
                    tagArr.map(item=>{
                        this.valueTag.push(item*1)
                    })
                    if(res.data.sale_time){
                        this.sale_time = this.$moment(res.data.sale_time*1000).format('YYYY-MM-DD');
                    }
                    if(res.data.build_time){
                        this.build_time = this.$moment(res.data.build_time*1000).format('YYYY-MM-DD')
                    }
                    console.log(this.build_time,'建成时间');
                    this.provinceObj = {
                        cityid:res.data.province_id,
                        city_name:res.data.province
                    };
                    if(res.data.province_id){
                        this.getCityList()
                    }
                    this.cityObj = {
                        cityid:res.data.city_id,
                        city_name:res.data.city
                    };
                    if(res.data.city_id){
                        this.getAreaList()
                    }
                    this.districtObj = {
                        cityid:res.data.district_id,
                        city_name:res.data.district
                    };
                    this.address = res.data.address;
                    if(Array.isArray(res.data.thumb_url)){
                        res.data.thumb_url.map(item=>{
                            this.fileList.push({
                                id:item.id,
                                url:item.path
                            })
                        })
                    }else{
                        this.fileList.push({
                            id:res.data.thumb_url.id,
                            url:res.data.thumb_url.path
                        })
                    }
                }
            })
        },

        // 获取楼盘标签
        getEstateTag(){
            this.$http.post('/api/root/option/getList',{type:'house_tag'}).then(res=>{
                console.log(res,'楼盘标签');
                if(res.code==1){
                    this.tagList = res.data?res.data:[]
                }
            })
        },

        // 选择楼盘标签
        selectTag(e){
            console.log(e,'选择的标签');
        },

        handleRemove(file, fileList) {
            this.fileList = fileList
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleEstateSuccess(res,file,fileList) {
            this.fileList = fileList
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isLt2M;
        },

            // 验证视频格式
        beforeUploadVideo(file) {
            if (
                [
                'video/mp4',
                'video/ogg',
                'video/flv',
                'video/avi',
                'video/wmv',
                'video/rmvb'
                ].indexOf(file.type) === -1
            ) {
                this.$message.error('请上传正确的视频格式')
                return false
            }
            const isLt2M = file.size / 1024 / 1024 < 30;
            if (!isLt2M) {
                this.$message.error('上传视频大小不能超过 30MB!');
            }
        },
        // 上传进度显示
        uploadVideoProcess(event, file, fileList) {
            console.log(event.percent, file, fileList)
            this.videoFlag = true
            this.videoUploadPercent = Math.floor(event.percent)
        },

        // 获取上传地址
        handleVideoSuccess(res, file) {
            this.videoFlag = false
            this.videoUploadPercent = 0
            console.log(res,file,'视频上传')
            this.videoUrl = file.response.data.url
            this.videoId = file.response.data.id
        },

        // 删除视频按钮
        closeVideo(){
            this.videoUrl = ''
            this.videoId = ''
        },

        // 省份选择
        select1(){
            this.getCityList()
        },
        // 城市选择
        select2(){
            if(!this.provinceObj){
                this.$message.warning('请先选择省份')
                return
            }
            this.getAreaList()
        },
        // 县区选择
        select3(){
            if(!this.cityObj){
                this.$message.warning('请先选择城市')
                return
            }
        },
        
        // 获取省份
        getProvince(){
            this.$http.post('/api/root/Region/getProvinceList').then(res=>{
                console.log(res,'省份');
                if(res.code==1){
                    this.province = res.data?res.data:[]
                }
            })
        },
        // 获取城市
        getCityList(){
            this.$http.post('/api/root/Region/getCityList',{province_id:this.provinceObj.cityid}).then(res=>{
                console.log(res,'城市列表');
                if(res.code==1){
                    this.city = res.data?res.data:[]
                }
            })
        },
        // 获取县区
        getAreaList(){
            this.$http.post('/api/root/Region/getDistrictList',{city_id:this.cityObj.cityid}).then(res=>{
                console.log(res,'县区列表');
                if(res.code==1){
                    this.district = res.data?res.data:[]
                }
            })
        },

        // 切换选项卡
        handleClick(e){
            console.log(e,'切换选项卡');
            if(e.name=='2'){
                this.thItem = ['户型名称','类型','户型','面积','价格']
                this.$refs.Fn2.getEstateHouseList()
                // console.log(this.$refs.Fn1,'王企鹅群翁群翁');
            }else if(e.name=='3'){
                this.thItem = ['房源名称','户型','面积','朝向','总价','均价']
                this.$refs.Fn3.getHouseList()
            }else if(e.name=='4'){
                this.thItem = ['店铺logo','店铺名称','联系人','联系电话','店铺状态','排序']
                this.$refs.Fn4.getDesginList()
            }else if(e.name=='5'){
                this.thItem = ['商品号','一级分类','二级分类','商品名','价格','库存']
                this.$refs.Fn5.getEstateProductList()
            }else if(e.name=='6'){
                this.thItem = ['直播名','频道','状态','扫流二维码']
                this.$refs.Fn6.getLiveList()
            }else if(e.name=='7'){
                this.getGreenList()
            }
        },

        // 新增户型按钮
        toEstateHouseAdd(){
            let provinceObj = JSON.stringify(this.provinceObj)
            let cityObj = JSON.stringify(this.cityObj)
            let districtObj = JSON.stringify(this.districtObj)
            this.$router.push({name:'estateHouseAdd',query:{estate_id:this.id,estate:this.name,market_id:this.marketId,provinceObj:encodeURIComponent(provinceObj),cityObj:encodeURIComponent(cityObj),districtObj:encodeURIComponent(districtObj)}})
        },

        // 新增房源按钮
        toHouseSource(){
             let provinceObj = JSON.stringify(this.provinceObj)
            let cityObj = JSON.stringify(this.cityObj)
            let districtObj = JSON.stringify(this.districtObj)
            this.$router.push({name:'houseSource',query:{estate_id:this.id,estate:this.name,market_id:this.marketId,provinceObj:encodeURIComponent(provinceObj),cityObj:encodeURIComponent(cityObj),districtObj:encodeURIComponent(districtObj)}})
        },

        // 新增设计师推荐
        toAddDesign(){
            this.dialogVisible_desgin = true
        },
        // 当设计师输入框为空时
        changeInput_desgin(){
            if(this.desginInput==''){
                this.desginList = []
            }
        },
        // 设计师推荐搜索按钮
        searchDesgin(){
            this.pageDes = 1
            if(this.desginInput==''){
                this.$message.warning('请输入设计师名')
                return
            }
            let params = {
                name:this.desginInput,
                page:this.pageDes,
                pagesize:this.pagesizeDes
            }
            this.$http.post('/api/root/Estate/designerMatch',params).then(res=>{
                console.log(res,'设计师列表');
                if(res.code==1){
                    if(!res.data.length){
                        this.searchShopList = true
                    }else if(res.data.length<10){
                        this.moreText = '没有更多了~'
                    }
                    this.desginList = res.data?res.data:[]
                }
            })
        },
        // 关闭了对话框
        closedFn_desgin(){
            this.desginRadio = ''
            this.desginInput = ''
            this.desginList = []
            this.searchShopList = false
            this.moreText = '点击加载更多~'
        },
        // 新增设计师对话框确定按钮
        desginConfirm(){
            console.log(this.desginRadio,'选的设计师');
            if(this.desginRadio == ''){
                this.$message.warning('请选择设计师')
                return
            }
            this.$http.post('/api/root/EstateDesigner/add',{estate_id:this.id,designer_id:this.desginRadio}).then(res=>{
                console.log(res,'添加设计师结果');
                if(res.code==1){
                    this.$message.success('添加成功')
                    this.dialogVisible_desgin = false
                    this.$refs.Fn4.getDesginList()
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },
        // 点击加载更更多
        moreBtnDes(){
            this.pageDes++
            if(this.desginInput==''){
                this.$message.warning('请输入设计师名')
                return
            }
            let params = {
                name:this.desginInput,
                page:this.pageDes,
                pagesize:this.pagesizeDes
            }
            this.$http.post('/api/root/Estate/designerMatch',params).then(res=>{
                console.log(res,'设计师列表');
                if(res.code==1){
                    if(!res.data.length){
                        this.moreText = '没有更多了~'
                    }
                    this.desginList = this.desginList.concat(res.data)
                }
            })
        },



        // 新增家居商品
        toAddHousehold(){
            this.dialogVisible_houseHold = true
        },
        // 对话框的搜索按钮
        searchHouseHold(){
            this.pageHold = 1
            if(this.houseHoldInput==''){
                this.$message.warning('请输入商品名')
                return
            }
            let params = {
                product_title:this.houseHoldInput,
                page:this.pageHold,
                pagesize:this.pagesizeHold
            }
            this.$http.post('/api/root/Estate/productMatch',params).then(res=>{
                console.log(res,'家居商品列表');
                if(res.code==1){
                    if(!res.data.length){
                        this.searchShopList = true
                    }else if(res.data.length<10){
                        this.moreText = '没有更多了~'
                    }
                    this.houseHoldList = res.data?res.data:[]
                }
            })
        },
        // 关闭了对话框
        closedFn_house(){
            this.houseRadio = ''
            this.houseHoldInput = ''
            this.houseHoldList = []
            this.searchShopList = false
            this.moreText = '点击加载更多~'
        },
        // 对话框搜索input为空时
        changeInput(){
            if(this.houseHoldInput==''){
                this.houseHoldList = []
            }
        },
        // 新增家居商品对话框确定按钮
        houseHoldConfirm(){
            console.log(this.houseRadio,'选的家居商品');
            if(this.houseRadio == ''){
                this.$message.warning('请选择商品')
                return
            }
            this.$http.post('/api/root/EstateProduct/add',{estate_id:this.id,product_id:this.houseRadio}).then(res=>{
                console.log(res,'添加家居商品结果');
                if(res.code==1){
                    this.$message.success('添加成功')
                    this.dialogVisible_houseHold = false
                    this.$refs.Fn5.getEstateProductList()
                }else{
                    this.$message.warning(res.msg)
                }
            })

        },
        // 点击加载更多
        moreBtnHold(){
            if(this.houseHoldInput==''){
                this.$message.warning('请输入商品名')
                return
            }
            let params = {
                product_title:this.houseHoldInput,
                page:this.pageHold,
                pagesize:this.pagesizeHold
            }
            this.$http.post('/api/root/Estate/productMatch',params).then(res=>{
                console.log(res,'家居商品列表');
                if(res.code==1){
                    if(!res.data.length){
                        this.moreText = '没有更多了~'
                    }
                    this.houseHoldList = this.houseHoldList.concat(res.data)
                }
            })
        },

        
        // 获取小区绿化列表
        getGreenList(){
            this.greenImgList = []
            this.$http.post('/api/root/EstateGreen/index',{estate_id:this.id,page:1,pagesize:10}).then(res=>{
                console.log(res,'小区绿化列表');
                if(res.code==1){
                    res.data.list.map(item=>{
                        this.greenImgList.push(item.image_id.path)
                    })
                    this.greenList = res.data.list?res.data.list:[]
                }
            })
        },
        // 新增小区绿化按钮
        addGreen(){
            this.dialogVisibleGreen = true
        },
        // 对话框关闭
        closedFn_green(){
            
        },
        // 新增绿化对话框确定
        green_Confirm(){
            let greenArr = []
            this.fileList_green.map(item=>{
                if(item.response){
                    greenArr.push(item.response.data.id)
                }else{
                    greenArr.push(item.id)
                }
            })
            let image_id = greenArr.join(',')
            this.$http.post('/api/root/EstateGreen/add',{estate_id:this.id,image_id}).then(res=>{
                console.log(res,'新增绿化结果');
                if(res.code==1){
                    this.$message.success('添加成功')
                    this.dialogVisibleGreen = false
                    this.getGreenList()
                    this.fileList_green = []
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },
        // 删除绿化图片
        closeGreenImg(id){
            this.$http.post('/api/root/EstateGreen/del',{id}).then(res=>{
                console.log(res,'删除图片结果');
                if(res.code==1){
                    this.$message.success('删除成功')
                    this.getGreenList()
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },

        // 绿化图片
        handleRemove_green(file, fileList) {

            this.fileList_green = fileList
        },
        handlePictureCardPreview_green(file) {
            this.dialogImageUrl_green = file.url;
            this.dialogVisible_green = true;
        },
        handleEstateSuccess_green(res,file,fileList) {
            console.log(res,'绿化图片');
            if(res.code==1){
                this.fileList_green = fileList
            }
        },
        beforeAvatarUpload_green(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传商品图片大小不能超过 2MB!');
            }
            return isLt2M;
        },


        // 提交按钮
        toSubmit(){
            if(this.marketId==''){
              this.$message.warning('请选择卖场')
              return
            }
            let openTime = this.$moment(this.sale_time).format('YYYY-MM-DD')
            console.log(openTime,'时间');
            let buildTime = this.$moment(this.build_time).format('YYYY-MM-DD')
            let thumb_url_id = []
            this.fileList.map(item=>{
                if(item.response){
                    thumb_url_id.push(item.response.data.id)
                }else{
                    thumb_url_id.push(item.id)
                }
            })
            console.log(this.fileList,'图片');
            let params = {
                id:this.id,
                name:this.name,
                area_price:this.area_price,
                age:this.age,
                lng:this.lng,
                lat:this.lat,
                phone:this.phone,
                house_tag:this.valueTag?this.valueTag.join(','):'',
                sale_time:openTime,
                build_time:buildTime,
                start_area:this.start_area,
                end_area:this.end_area,
                province_id:this.provinceObj.cityid,
                province:this.provinceObj.city_name,
                city_id:this.cityObj.cityid,
                city:this.cityObj.city_name,
                district_id:this.districtObj.cityid,
                district:this.districtObj.city_name,
                address:this.address,
                thumb_url:thumb_url_id.join(','),
                video:this.videoId,
                market_id:this.marketId
            }
            console.log(params,'提交数据');
            let url = this.id?'/api/root/Estate/edit':'/api/root/Estate/add';
            this.$http.post(url,params).then(res=>{
                console.log(res,'提交结果');
                if(res.code==1){
                    this.$message.success(this.id?'修改成功':'添加成功')
                    this.$router.back(1)
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },

        // 返回
        toBack(){
            this.$router.back(1)
        },
    }
}
</script>

<style lang="less">
    @import 'estateAdd.less';
</style>


